<template>
	<div id="page">
       <ul class="pagination" >
            <li v-show="current != 1" @click="goto(1)"><a href="javascript:;">首页</a></li>
            <li v-show="current != 1" @click="current-- && goto(current--)" ><a href="javascript:;">上一页</a></li>
            <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
              <a href="javascript:;" >{{index}}</a>
            </li>
            <li v-show="allpage > current && allpage != 0 " @click="current++ && goto(current++)"><a href="javascript:;" >下一页</a></li>
            <li v-show="allpage > current && allpage != 0 " @click="goto(allpage)"><a href="javascript:;">末页</a></li>
            <li>到第&nbsp;<input type="text" v-model="current" @keyup="goto(current)">&nbsp;页&nbsp;&nbsp;<a href="javascript:;" @click="goto(current)">确定</a></li>
        </ul>
    </div>
</template>
<script>
export default {
	name:'page',
        data:function(){
          return{
            //当前页码
            current:this.pageinfo.current,
            //每页显示条数
            showItem:this.pageinfo.showItem,
            //总页数
            allpage:1,
          }
        },
        watch:{
          shownum(val,oldval){
            this.shownum =  val || 1;
          }
        },
        props: ['pageinfo'],
        watch:{   
          shownum(val,oldval){
              this.allpage = Math.ceil(this.shownum / this.showItem);
          }
        },
        computed:{
          shownum:function(){
              return this.pageinfo.shownum || 1;
          },
          pages:function(){
                var pag = [];
                  if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
                       //总页数和要显示的条数那个大就显示多少条
                       var i = Math.min(this.showItem,this.allpage);
                       while(i){
                           pag.unshift(i--);
                       }
                   }else{ //当前页数大于显示页数了
                       var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
                           i = this.showItem;
                       if( middle >  (this.allpage - this.showItem)  ){
                           middle = (this.allpage - this.showItem) + 1
                       }
                       while(i--){
                           pag.push( middle++ );
                       }
                   }
                 return pag
               }
      },
      methods:{
        goto:function(index){

        	if(this.current <1 ){
        		this.current =1;
        	}else if(this.current > this.allpage){
        		this.current =this.allpage;
        	}
            this.current = index;

           	let data ={
           		current:this.current,
              showItem:this.showItem
           	} 
            this.infoshow(data);
        },
        infoshow(data){
        	this.$emit('info',data)
        }
      }
}
</script>
<style scoped>
  body{
      font-family:"Segoe UI";
    }
    li{
      list-style:none;
    }
    a{
      text-decoration:none;
    }
    .pagination {
        position: relative;
      }
      .pagination li{
        display: inline-block;
        margin:0 3px;
        color:#666;
        font-size: 13px;
      }
      .pagination li a{
        padding:.3rem 0.5rem;
        display:inline-block;
        border:1px solid #ddd;
        background:#fff;
        color:#0E90D2;
        font-size: 14px;
      }
      .pagination li a:hover{
        background:#eee;
      }
      .pagination li input{
      	width: 25px;
      	height: 18px;
		text-align: center;
		font:14px/18px '微软雅黑';
		color:#666;
      }
    
      .pagination li.active a{
        background:#0E90D2;
        color:#fff;
      }
</style>